<template>
  <el-form :inline="true" :model="pageData" class="demo-form-inline">
    <el-form-item label="">
      <el-input
        v-model="pageData.keyWord"
        placeholder="请输入入库单号"
        clearable
      />
    </el-form-item>

    <el-form-item label="">
      <el-input v-model="pageData.beginTime" placeholder="从" clearable />
    </el-form-item>

    <el-form-item label="">
      <el-input v-model="pageData.endTime" placeholder="到" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="page()">查找</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="name" label="名称" width="180" />
    <el-table-column prop="shopNumber" label="单号" />
    <el-table-column prop="shopTime" label="时间" />
    <el-table-column prop="shopNum" label="库存" />
    <el-table-column prop="price" label="价格" />
    <el-table-column prop="status" label="状态" />
  </el-table>

  <el-pagination
    v-model:current-page="currentPage4"
    v-model:page-size="pageSize4"
    :page-sizes="[1, 3, 5, 7]"
    :size="size"
    :disabled="disabled"
    :background="background"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
import axios from "axios";
import router from "@/router/index";
import { onMounted } from "vue";
import { storeToRefs } from "pinia";
import { useCounterStore } from "@/stores/counter";
import { list } from "@/api/api";
const currentPage4 = ref(4);
const total = ref(0);
const pageSize4 = ref(100);
const size = ref<ComponentSize>("default");
const background = ref(false);
const disabled = ref(false);

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  pageData.value.pageSize = val;
  page();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  pageData.value.pageNum = val;
  page();
};
const tableData = ref([]);
const pageData = ref({
  pageNum: "",
  pageSize: "",
  keyWord: "",
  beginTime: "",
  endTime: "",
});

const page = async () => {
  let d = await list(pageData.value);
  if (d.data.flag) {
    tableData.value = d.data.data.arrayList;
    total.value = d.data.data.total;
  }
};
onMounted(() => {
  page();
});
</script>
